<template>
  <div>
    <el-card>
      <el-cascader
        v-model="groupList"
        ref="cascader"
        clearable
        :props="group"
        placeholder="全部"
        :show-all-levels="false"
        :style="{ width }"
        @change="handleGroup"
      ></el-cascader>
      <el-button style="margin-left: 10px;" type="primary" @click="handleSearch">查询</el-button>

    </el-card>
  </div>
</template>

<!-- vue3 级联选择器组件 -->
<script setup>
import { ref, defineProps, reactive } from "vue";

let cascader = ref();

let id = 0;
let group = reactive({
  lazy: true,
  // 不显示单选框
  checkStrictly: true,
  emitPath: false,
  expandTrigger: "hover",
  multiple: true, // 开启多选
  checkStrictly: true, // 父子节点取消关联
  lazyLoad(node, resolve) {
    const { level } = node;
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 }).map((item) => ({
        value: ++id,
        label: `Option - ${id}`,
        leaf: level >= 1,
      }));
      resolve(nodes);
    }, 1000);
  },
});
// 选中的部门节点
let groupList = ref([]);

/**
 * 查询
 */
function handleSearch(){
    // console.log(21, groupList.value);
}
/**
 * 监听变化
 */
function handleGroup(){
    
}

defineProps({
  /**
   * 宽度
   */
  width: {
    type: String,
    default: () => "20%",
  },
});
</script>

<style scoped lang="scss"></style>
